<style lang="less">
@import "./sendUp.less";
</style>
<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
              <Form-item label="任务名称">
                <Input
                  type="text"
                  v-model="searchForm.taskName"
                  clearable
                  placeholder="请输入任务名称"
                  style="width: 200px"
                />
              </Form-item>
              <Form-item style="margin-left:-35px;" class="br">
                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                <Button @click="handleReset">重置</Button>
              </Form-item>
            </Form>
          </Row>
          <Row class="operation">
            <Button @click="add" type="primary" icon="md-add" v-has="'add'">新增</Button>
            <circleLoading v-if="operationLoading" />
          </Row>
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              :current="searchForm.current"
              :total="total"
              :page-size="searchForm.size"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10,20,50,100]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </Card>
      </Col>
    </Row>
    <Modal
      :title="modalTitle"
      v-model="sendUpModalVisible"
      :mask-closable="false"
      :width="500"
      :styles="{top: '30px'}"
    >
      <Form ref="sendUpForm" :model="sendUpForm" :label-width="100" :rules="sendUpFormValidate">
        <FormItem label="任务名称" prop="taskName">
          <Input v-model="sendUpForm.taskName" />
        </FormItem>
        <FormItem label="消息发送来源" prop="sendResource">
          <Input v-model="sendUpForm.sendResource" autocomplete="off" />
        </FormItem>
        <FormItem label="车牌号" prop="licnum">
          <Input v-model="sendUpForm.licnum" autocomplete="off" />
        </FormItem>
        <Form-item
          label="车牌颜色"
          prop="plateColor"
          :rules="{required: true, message: '必选',  trigger:'change',type:'number'}"
        >
          <Select v-model="sendUpForm.plateColor" :transfer="true">
            <Option
              v-for="item in plateColorSelect"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>
        <FormItem label="指令类型" prop="commandType">
           <Select v-model="sendUpForm.commandType" :transfer="true">
            <Option
              v-for="item in sendUpCommandTypeSelect"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="指令内容" prop="commandDetail">
          <Input v-model="sendUpForm.commandDetail" autocomplete="off" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="sendUpModalVisible = false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitSendUp">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getSendUpPageList,
  addSendUp,
  editSendUp,
  deleteSendUp
} from "@/api/monitor";
import circleLoading from "../../my-components/circle-loading.vue";
import { plateColorSelect,sendUpCommandTypeSelect } from "@/libs/dict";
export default {
  name: "sendUp-manage",
  components: {
    circleLoading
  },
  data() {
    return {
      plateColorSelect: plateColorSelect,
      sendUpCommandTypeSelect:sendUpCommandTypeSelect,
      loading: true,
      operationLoading: false,
      searchForm: {
        deviceName: "",
        deviceType: "",
        current: 1,
        size: 20,
        sort: "createTime",
        order: "desc"
      },
      sendUpModalVisible: false,
      modalTitle: "",
      sendUpForm: {
        sendId: "",
        sendResource: "",
        licnum:"",
        plateColor: "",
        commandType: "",
        commandDetail: "",
        deviceResponse: "",
        deviceResponseTime: "",
        upResponse: "",
        upResponseTime: "",
        taskName: "",
        sendStatus: ""
      },
      sendUpFormValidate: {
        taskName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
         sendResource: [
          { required: true, message: "消息发送来源不能为空", trigger: "blur" }
        ],
         licnum: [
          { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        plateColor: [
          {
            required: true,
            message: "车牌颜色必选",
            trigger: "change",
            type: "number"
          }
        ],
        commandType: [
         {
            required: true,
            message: "指令类型必选",
            trigger: "change",
            type: "number"
          }
        ],
        commandDetail: [
          { required: true, message: "指令内容不能为空", trigger: "blur" }
        ]
      },
      submitLoading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "任务名称",
          key: "taskName",
          width: 150,
          sortable: true
        },
        {
          title: "消息发送来源",
          key: "sendResource",
          width: 160,
          sortable: true
        },
        {
          title: "车牌号",
          key: "licnum",
          width: 120,
          sortable: true
        },
        {
          title: "车牌颜色",
          key: "plateColor",
          minWidth: 180,
          render: (h, params) => {
            return h(
              "span",
              this.plateColorSelect.find(item => {
                return item.value == params.row.plateColor;
              }).label
            );
          }
        },
         {
          title: "指令类型",
          key: "commandType",
          width: 150,
          sortable: true,
           render: (h, params) => {
            return h(
              "span",
              this.sendUpCommandTypeSelect.find(item => {
                return item.value == params.row.commandType;
              }).label
            );
          }
        },
        {
          title: "指令内容",
          key: "commandDetail",
          width: 200,
        },
        {
          title: "设备响应内容",
          key: "deviceResponse",
          width: 200,
          sortable: true
        },
        {
          title: "设备响应时间",
          key: "deviceResponseTime",
          minWidth: 150,
          sortable: true
        },
        {
          title: "下发时间",
          key: "sendTime",
          sortable: true,
          sortType: "desc",
          width: 150
        }
      ],
      data: [],
      total: 0
    };
  },
  methods: {
    init() {
      this.getSendUpList();
    },
    changePage(v) {
      this.searchForm.current = v;
      this.getSendUpList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.size = v;
      this.getSendUpList();
    },
    getSendUpList() {
      // 多条件搜索
      this.loading = true;
      getSendUpPageList(this.searchForm).then(res => {
        this.loading = false;
        if (res.code == 0) {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    handleSearch() {
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.getSendUpList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.taskName = "";
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      // 重新加载数据
      this.getSendUpList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getSendUpList();
    },

    submitSendUp() {
      this.$refs.sendUpForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          addSendUp(this.sendUpForm).then(res => {
            this.submitLoading = false;
            if (res.code == 0) {
              this.$Message.success("操作成功");
              this.getSendUpList();
              this.sendUpModalVisible = false;
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    add() {
      this.modalTitle = "新增指令";
      this.$refs.sendUpForm.resetFields();
      this.sendUpModalVisible = true;
    }
  },
  mounted() {
    this.init();
  }
};
</script>